iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 14
0

本系列的前面幾章都在介紹關於網頁設計的功能語法HTML,不過只有功能好像不足以成為一個完整的網站,最明顯的差異就像是以往我們看到的網頁都是有不同顏色的吧!
今天我們要來介紹的就是CSS,他就是專門用來把網頁上的東西呈現出來的。

CSS

CSS原名為Cascading Style Sheets,中文翻譯為層疊樣式表,前面有說到我們可以用他來做網頁樣式的設計,他是屬於樣式表語言。他不能單獨使用,必須搭配HTML或XML等結構化文件一起工作,分工上就是HTML決定網站的內容,CSS決定內容呈現的樣式排版等等的,CSS最重要的目標就是將檔案的內容與他的顯示分隔開來。

CSS的架構

CSS主要由3個東西組成:

  • 選擇器 selector
  • 屬性 property
  • 值 value
<p>
    font-size: 60px;
    color: black;
    background: yellow;
</p>

這是我們針對<p></p>標籤裡面的內容所做的設定,我們指定的<p>標籤就是所謂的選擇器
再看到標籤裡面夾的程式碼,靠前的font-size、color、background是屬性,屬性包含著像是顏色、字體大小、背景顏色等等的,只要接上冒號(:),後面就可以自行決定想要對該屬性設定的。不過不同的屬性也有特定格式的值,就好比說,你總不能規定那一行字的大小是黃色的吧!完全不合邏輯是吧~
先稍微透漏一點點,就是CSS方便的地方在於,可以零星的對網頁做樣式設定,不是所有同樣標籤的內容都必須套用一樣的版式,例如我就想要網頁全部為黑色背景,只有中間那一塊是水藍色的,也是很容易做到的喔!

CSS其實也有很多自己的格式和功能,前面我們講過不少HTML的語法,接下來的文章也會和之前一樣,以CSS為主題一一為大家介紹! /images/emoticon/emoticon37.gif


上一篇
DAY13-HTML標籤(11) / 表單(下)
下一篇
Day15-CSS的用法
系列文
每個人都可以做出理想中的網站!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言